<template>
    <div class="login-container">
        <div class="header">
            <n-button
                  text
                  @click="$router.push({ name: 'chooseIdentity'})"
            >
                <template #icon>
                    <n-icon>
                        <arrow-left />
                    </n-icon>
                </template>
                返回
            </n-button>
        </div>
        <div class="blank" />
        <div class="form-container">
            <div class="form">
                <h2>欢迎！</h2>
                <n-form
                      :model="user"
                      :rules="rules"
                      label-placement="left"
                      ref="formRef"
                >
                    <n-form-item
                          label="学校"
                          path="schoolName"
                          v-if="$store.state.identity === 'student'"
                    >
                        <n-select
                              v-model:value="user.schoolName"
                              :options="schoolList"
                        />
                    </n-form-item>
                    <n-form-item
                          label="账号"
                          path="username"
                    >
                        <n-input
                              v-model:value="user.username"
                              clearable
                        />
                    </n-form-item>
                    <n-form-item
                          label="密码"
                          path="password"
                    >
                        <n-input
                              v-model:value="user.password"
                              type="password"
                              clearable
                        />
                    </n-form-item>
                    <n-form-item>
                        <n-button
                              type="primary"
                              size="large"
                              attr-type="submit"
                              @click="login"
                        >
                            登陆
                        </n-button>
                    </n-form-item>
                </n-form>
            </div>
        </div>
    </div>
</template>

<script>
import { ArrowLeft } from '@vicons/carbon'
import { defineComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'
import api from '../api'

export default defineComponent({
    name: 'Login',
    components: {
        ArrowLeft
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            vm.getSchoolList()
        })
    },
    setup() {
        const formRef = ref(null)
        const message = useMessage()
        window.$message = useMessage()
        return {
            formRef,
            user: ref({
                username: '',
                password: '',
                schoolName: ''
            }),
            rules: {
                username: [{required:true, message: '账号不可为空', trigger: ['blur']}],
                password: [{required:true, message: '密码不可为空', trigger: ['blur']}],
                schoolName: [{required:true, message: '请选择学校', trigger:'blur'}]
            },
            validate() {
                formRef.value.validate((errors) => {
                    if(errors) {
                        console.log(errors)
                    }
                })
            },
            loginSuccess() {
                message.success('登陆成功')
            }
        }
    },
    data() {
        return {
            schoolList: []
        }
    },
    methods: {
        async getSchoolList() {
            const resp = await api.admin.getSchools('')
            this.schoolList = resp.data.map((s) => {
                return {
                    label: s.name,
                    value: s.name
                }
            })
        },
        async login() {
            if (typeof this.user.username === 'undefined' || this.user.username === '') {
                return
            }
            if (typeof this.user.password === 'undefined' || this.user.password === '') {
                return
            }
            this.validate()
            const identity = this.$store.state.identity
            let resp = await api.user.login(this.user, identity)
            resp = resp.data
            this.$store.commit('setUsername', this.user.username)
            localStorage.setItem(identity + 'WeID', resp.weID)
            this.$store.commit('setToken', resp.token)
            if(identity === 'student') {
                this.$store.commit('setSchoolName', this.user.schoolName)
            } else if(identity === 'school'){
                this.$store.commit('setSchoolName', resp.schoolName)
            }
            this.loginSuccess()
            await this.$router.push({name: 'LayOut', params: {
                identity: this.$store.state.identity
            }})
        }
    }
})
</script>

<style scoped>
.login-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header {
    margin: 20px;
}
.blank {
    height: 15%;
}
.form-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.form {
    position: relative;
    width: 30%;
    height: 100%;
    padding: 30px;
}
.form h2 {
    position: relative;
    cursor: pointer;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 5px;
    margin-bottom: 30px;
}
.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 3px;
    transition: 0.5s;
}
.form h2:hover:before {
    width: 53px;
}
</style>